<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.scrollImg{
			width: 810px;
			height: 320px;
			margin: auto;
			overflow: hidden;
		}
		.scrollImg ul {
			width: 3240px;
			list-style: none;
		}
		.scrollImg ul li {
			width: 810px; height: 320px;
			float: left;
			font-size: 50px;
		}
	</style>
	<script type="text/javascript">
		onload =function(){
			var lis = document.getElementsByTagName("li");
			
			var index = 1;
			setInterval(function(){
				for(var i=0; i<lis.length; i++){
					lis[i].style.display = "none";
				}
				lis[index].style.display = "block";
				(++index == 4) ? index = 0 : "";
			},2000);
		}
	</script>	
	<body>
		<div class="scrollImg">
			<ul>
				<li style="background: red;">A</li>
				<li style="background: blue;">B</li>
				<li style="background: yellow;">C</li>
				<li style="background: gray;">D</li>
			</ul>
		</div>
		
	</body>
</html>
